<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .table-container {
            overflow-x: auto;
        }
        .form-modal {
            display: none;
            position: fixed;
            z-index: 999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .form-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
            max-width: 600px;
            border-radius: 10px;
            position: relative;
        }
    </style>
</head>
<body class="bg-light font-inter text-dark">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fa fa-users text-blue-500 text-xl mr-2"></i>
                <span class="text-lg font-semibold">用户管理系统</span>
            </div>
            <div class="flex items-center space-x-4">
                <th:block th:if="${session.user != null}">
                    <span class="text-gray-600">
                        <i class="fa fa-user-circle mr-1"></i>
                        <span th:text="${session.user.username}">用户名</span>
                    </span>
                    <a th:href="@{/logout}" class="text-red-500 hover:text-red-600 transition-colors">
                        <i class="fa fa-sign-out mr-1"></i>退出登录
                    </a>
                </th:block>
                <th:block th:unless="${session.user != null}">
                    <span class="text-gray-600">
                        <i class="fa fa-exclamation-circle mr-1"></i>
                        请先登录
                    </span>
                    <a th:href="@{/login}" class="text-blue-500 hover:text-blue-600 transition-colors">
                        <i class="fa fa-sign-in mr-1"></i>去登录
                    </a>
                </th:block>
            </div>
        </div>
    </div>

    <div class="container mx-auto p-4">
        <th:block th:if="${session.user != null}">
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold text-gray-800">用户列表</h1>
                <button onclick="openModal('添加用户')" 
                        class="px-3 py-1.5 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center text-sm">
                    <i class="fa fa-user-plus mr-1"></i> 添加用户
                </button>
            </div>

            <!-- 添加用户模态框 -->
            <div id="addUserModal" class="form-modal">
                <div class="form-content">
                    <span class="close" onclick="closeModal('addUserModal')">&times;</span>
                    <h2 class="text-xl font-bold mb-4">添加用户</h2>
                    <form id="addUserForm" method="post" class="space-y-4">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                <i class="fa fa-id-card mr-2"></i> 用户ID
                            </label>
                            <input type="text" id="addUserId" name="id" required
                                   class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary"
                                   placeholder="请输入用户ID">
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                <i class="fa fa-user mr-2"></i> 用户名
                            </label>
                            <input type="text" id="addUsername" name="username" required
                                   class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary">
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                <i class="fa fa-envelope mr-2"></i> 邮箱
                            </label>
                            <input type="email" id="addEmail" name="email" required
                                   class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary">
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                <i class="fa fa-lock mr-2"></i> 密码
                            </label>
                            <input type="password" id="addPassword" name="password" required
                                   class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary">
                        </div>
                        <div class="flex justify-end space-x-3 mt-4">
                            <button type="button" onclick="closeModal('addUserModal')" 
                                    class="px-3 py-1.5 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors text-sm">
                                <i class="fa fa-times mr-1"></i> 取消
                            </button>
                            <button type="submit" 
                                    class="px-3 py-1.5 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm">
                                <i class="fa fa-save mr-1"></i> 保存
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 编辑用户模态框 -->
            <div id="editUserModal" class="form-modal">
                <div class="form-content">
                    <span class="close" onclick="closeModal('editUserModal')">&times;</span>
                    <h2 class="text-xl font-bold mb-4">编辑用户</h2>
                    <form id="editUserForm" method="post" class="space-y-4">
                        <input type="hidden" id="editUserId" name="id">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                <i class="fa fa-id-card mr-2"></i> 用户ID
                            </label>
                            <input type="text" id="displayUserId" disabled
                                   class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 bg-gray-100">
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                <i class="fa fa-user mr-2"></i> 用户名
                            </label>
                            <input type="text" id="editUsername" name="username" required
                                   class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary">
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">
                                <i class="fa fa-envelope mr-2"></i> 邮箱
                            </label>
                            <input type="email" id="editEmail" name="email" required
                                   class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary">
                        </div>
                        <div class="flex justify-end space-x-3 mt-4">
                            <button type="button" onclick="closeModal('editUserModal')" 
                                    class="px-3 py-1.5 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors text-sm">
                                <i class="fa fa-times mr-1"></i> 取消
                            </button>
                            <button type="submit" 
                                    class="px-3 py-1.5 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm">
                                <i class="fa fa-save mr-1"></i> 保存修改
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 用户列表 -->
            <div class="table-container mt-8">
                <table class="min-w-full bg-white rounded-lg shadow">
                    <thead>
                    <tr>
                        <th class="px-6 py-3 border-b-2 border-gray-300 text-left text-sm font-semibold">ID</th>
                        <th class="px-6 py-3 border-b-2 border-gray-300 text-left text-sm font-semibold">用户名</th>
                        <th class="px-6 py-3 border-b-2 border-gray-300 text-left text-sm font-semibold">邮箱</th>
                        <th class="px-6 py-3 border-b-2 border-gray-300 text-center text-sm font-semibold">操作</th>
                    </tr>
                    </thead>
                    <tbody th:each="user : ${users}">
                    <tr class="hover:bg-light">
                        <td class="px-6 py-4 border-b border-gray-200 text-sm">
                            <span th:text="${user.id}"></span>
                        </td>
                        <td class="px-6 py-4 border-b border-gray-200 text-sm">
                            <span th:text="${user.username}"></span>
                        </td>
                        <td class="px-6 py-4 border-b border-gray-200 text-sm">
                            <span th:text="${user.email}"></span>
                        </td>
                        <td class="px-6 py-4 border-b border-gray-200 text-center text-sm">
                            <button class="edit-btn bg-blue-500 text-white px-2 py-1 rounded mr-2 text-sm"
                                    th:data-id="${user.id}" th:data-username="${user.username}" th:data-email="${user.email}">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="delete-btn bg-red-500 text-white px-2 py-1 rounded text-sm"
                                    th:data-id="${user.id}">
                                <i class="fa fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </th:block>
        <th:block th:unless="${session.user != null}">
            <div class="text-center py-12">
                <i class="fa fa-lock text-6xl text-gray-400 mb-4"></i>
                <h2 class="text-2xl font-bold text-gray-600 mb-2">需要登录</h2>
                <p class="text-gray-500 mb-4">请先登录以访问用户管理系统</p>
                <a th:href="@{/login}" class="inline-block px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                    <i class="fa fa-sign-in mr-2"></i>去登录
                </a>
            </div>
        </th:block>
    </div>

    <script>
        // 打开添加用户模态框
        function openModal(title) {
            document.getElementById('addUserModal').style.display = 'block';
        }

        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        // 点击模态框外部关闭
        window.addEventListener('click', (e) => {
            if (e.target.classList.contains('form-modal')) {
                e.target.style.display = 'none';
            }
        });

        // 添加用户表单提交
        document.getElementById('addUserForm').addEventListener('submit', (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);

            fetch('/users/save', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        closeModal('addUserModal');
                        window.location.reload();
                    } else {
                        alert('添加失败：' + data.message);
                    }
                })
                .catch(error => console.error('Error:', error));
        });

        // 编辑按钮点击事件
        document.querySelectorAll('.edit-btn').forEach(button => {
            button.addEventListener('click', () => {
                const user = {
                    id: button.dataset.id,
                    username: button.dataset.username,
                    email: button.dataset.email
                };
                document.getElementById('editUserId').value = user.id;
                document.getElementById('displayUserId').value = user.id;
                document.getElementById('editUsername').value = user.username;
                document.getElementById('editEmail').value = user.email;
                document.getElementById('editUserModal').style.display = 'block';
            });
        });

        // 编辑用户表单提交
        document.getElementById('editUserForm').addEventListener('submit', (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);

            fetch('/users/update', {
                method: 'PUT',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        closeModal('editUserModal');
                        window.location.reload();
                    } else {
                        alert('更新失败：' + data.message);
                    }
                })
                .catch(error => console.error('Error:', error));
        });

        // 删除按钮点击事件
        document.querySelectorAll('.delete-btn').forEach(button => {
            button.addEventListener('click', () => {
                const userId = button.dataset.id;
                if (confirm('确认要删除该用户吗？')) {
                    fetch(`/users/delete/${userId}`, { method: 'DELETE' })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                window.location.reload();
                            } else {
                                alert('删除失败：' + data.message);
                            }
                        })
                        .catch(error => console.error('Error:', error));
                }
            });
        });
    </script>
</body>
</html>